<div class="card card-accent-info">
  <div class="card-body">
    <h4 class="card-title">Use [initOpts] to setup echarts.init()</h4>
    <div class="mt-4">
      <tabset>
        <tab heading="demo">
          <div class="row">
            <div class="col-md-6">
              Please refer to <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#echarts.init" target="_blank">ECharts documentation</a> for detail.
              <markdown [data]="demo_hint | language: 'typescript'"></markdown>
            </div>
            <div class="col-md-6">
              <echarts [initOpts]="initOpts" [options]="options"></echarts>
            </div>
          </div>
        </tab>
        <tab heading="html">
          <markdown [data]="demo_html | language: 'html'"></markdown>
        </tab>
        <tab heading="component">
          <markdown [data]="demo_ts | language: 'typescript'"></markdown>
        </tab>
      </tabset>
    </div>
  </div>
</div>